<template>
  <div class="tablec">
    <!-- <div class="table-title">月度交易价格累计汇总</div> -->
    <el-table 
      :data="tableData" 
      :span-method="spanMethod"
      style="width: 100%; background: #04065f;" 
      :border="true"
      :row-class-name="rowClass"
      max-height="290"
      size="small"
      class="custom-scroll-table"
    >
    <!-- <el-table-column label-class-name="column1 column10" align="center" label="月度交易价格累计汇总"> -->
      <el-table-column 
        prop="projectName" 
        label="项目名称" 
        label-class-name="column1" 
        class-name="column1" 
        align="center"
      >
      </el-table-column>
      <el-table-column 
        prop="category" 
        label="分类" 
        label-class-name="column1" 
        class-name="column1" 
        align="center"
      >
      </el-table-column>
      <el-table-column 
        prop="val1" 
        label="月累计交易(D+1日更新)" 
        label-class-name="column1" 
        class-name="column1" 
        align="center"
      >
      </el-table-column>
      <el-table-column 
        prop="val2" 
        label="月累计结算" 
        label-class-name="column1" 
        class-name="column1" 
        align="center"
      >
      </el-table-column>
      <el-table-column 
        prop="val3" 
        label="现货部分年累计结算" 
        label-class-name="column1" 
        class-name="column1" 
        align="center"
      >
      </el-table-column>
      <el-table-column 
        prop="val4" 
        label="全年累计交易结算" 
        label-class-name="column1" 
        class-name="column1" 
        align="center"
      >
      </el-table-column>
      <!-- </el-table-column> -->
    </el-table>
    <!-- 全屏 -->
    <el-dialog title="预览" :modal-append-to-body="false" :visible.sync="showBig" custom-class="userdialog" fullscreen>
     
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import { insertApi, updateApi, deleteApi, insertDayApi, updateDayApi, deleteDayApi, importApi, importDayApi } from "@/api/table";
import { baseUrl } from "@/api/api";

function toFixed(val, fix = 3) {
  return val ? Number(val) : val;
}

export default {
  components: {
  },
  props: {
    title: {
      type: String,
      default: "表格",
    },
    data: {
      type: Array,
      default: () => [],
    },
    checked: {
      type: Array,
      default: () => [],
    },
    params: {
      type: Object,
      default: () => ({}),
    },
    dataType: {
      type: String,
      default: "日期",
    },
    type: {
      type: String,
      default: "风电场",
    },
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
      },
      deep: true,
    },
    typeObj: {
      handler(val) {
        this.getList();
      },
      deep: true,
    },
  },
  data() {
    return {
      tableData: [
        { projectName: '-', category: '-', val1: '-', val2: '-', val3: '-', val4: '-', },
      ],
      dialogVisible: false,
      dialogLoading: false,
      rowData: {},
      visible: false,
      oneRow: {},
      oneValue: '',
      oneLabel: '',
      oneKey: '',
      showBig: false,
      userInfo: {},
      canEdit: false,
    };
  },
  created() {
    // const userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {}
    // this.userInfo = userInfo
    // this.canEdit = !userInfo.roleName.includes('非交易人员')
    // this.init(this.data);
  },
  computed: {
    isTop() {
      return this.$store.state.setting.isTop;
    },
  },
  methods: {
    // 合并单元格方法
    spanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row.projectName,'row---');
      
      if (row.projectName === '合计' && columnIndex === 0) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        } else if (rowIndex % 3 !== 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }else if (columnIndex === 0) {
      // 只对项目名称列进行合并

        // 周覃项目合并 (0,1,2行)
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        } else if (rowIndex % 3 !== 0) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    async beforeUpload(file) {
      // const res = await importDayApi({ file })
      // console.log(res,'res');
    },
    getList() {
      this.$emit('init')
    },
    
    async exportData() {
      console.log(this.dataType, this.params, "导出-----");
      const params = {...this.params};
      if (!params) {
        return;
      }
      let str = "";
      if (this.dataType === "天") {
        params.recordDate = `${params.recordDate},${params.endRecordDate}`
        delete params.endRecordDate
      }
      const kkArr = Object.keys(params)
      kkArr.forEach((kk, i) => {
        str += kk;
        if (i === (kkArr.length - 1)) {
          str += "=" + params[kk];
        }else {
          str += "=" + params[kk] + "&";
        }
        
      });
      console.log(str, "str----------");
      if (this.dataType === "天") {
        this.openAndCloseWindow(`${baseUrl}/powerTradingData/export?${str}`);
      } else if (this.dataType === "日期") {
        //  const res = await dailySummaryExport(params)
        this.openAndCloseWindow(`${baseUrl}/dailySummary/export?${str}`);
      }
    },
    openAndCloseWindow(val) {
      // 打开新窗口
      let newWindow = window.open(val.replace(/&+$/, ""), "_blank");

      // 3秒后关闭窗口
      setTimeout(() => {
        if (newWindow && !newWindow.closed) {
          newWindow.close();
          newWindow = null;
          console.log("窗口已关闭");
        }
      }, 10000);
    },
    init(val) {
      this.tableData = val;
    },
    rowClass({ row }) {
      // if (row.time === "合计") {
      //   return "column11";
      // } else {
        return 'column100'
      // }
    },
    handleMouseEnter(row, column, cell, event) {
      // 鼠标进入时的操作
      cell.style.cursor = 'pointer';
      cell.style.backgroundColor = '#063088';
      cell.style.color = '#FFFFFF';
    },
    handleMouseLeave(row, column, cell, event) {
      // 鼠标离开时的操作
      cell.style.cursor = '';
      cell.style.backgroundColor = '';
      cell.style.color = '';
    },
  },
};
</script>

<style lang="scss" scope>
:deep(.el-table--border th.el-table__cell.gutter){
    background-color: #212768 !important;
}
.columnAll {
  background: #080f57;
  color: #FFFFFF;
}

.column1 {
  background: #212768 !important;
  color: #FFFFFF !important;
}

.column2 {
  background: #063088 !important;
  color: #FFFFFF !important;
}

.column3 {
  background: #0f2168;
  color: #FFFFFF;
}

.column4 {
  background: #1e478a !important;
  color: #FFFFFF !important;
}

.column5 {
  background: #f8fdff;
}

.column6 {
  background: #063088 !important;
  color: #FFFFFF !important;
}

.column7 {
  background: #f7fdfa;
}

.column8 {
  background: #1e478a !important;
  color: #FFFFFF !important;
}

.column9 {
  background: #fdfaff;
}

.column10 {
  font-weight: 600;
  color: black;
}

.el-table__row:hover>.el-table__cell {
  font-weight: 600;
  color: black;
}

// .el-table__cell:hover {
//   font-weight: 600;
//   color: black !important;
// }
.column11 {
  td {
    font-weight: 600;
    // color: black;
    color: #FFFFFF !important;
    background: #fffaee !important;
  }
}

// 自定义表格垂直滚动条样式
.custom-scroll-table {
  
  // 垂直滚动条样式
  &::-webkit-scrollbar {
    width: 18px;
  }

  // 垂直滚动条轨道
  &::-webkit-scrollbar-track {
    background: rgba(33, 39, 104, 0.2);
    border-radius: 4px;
    margin: 2px 0;
  }

  // 垂直滚动条滑块
  &::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
      rgba(14, 59, 150, 0.8) 0%, 
      rgba(33, 39, 104, 0.9) 50%, 
      rgba(14, 59, 150, 0.8) 100%
    );
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
      background: linear-gradient(180deg, 
        rgba(14, 59, 150, 1) 0%, 
        rgba(33, 39, 104, 1) 50%, 
        rgba(14, 59, 150, 1) 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 0 6px rgba(14, 59, 150, 0.5);
      transform: scaleX(1.1);
    }
    
    &:active {
      background: linear-gradient(180deg, 
        rgba(14, 59, 150, 0.9) 0%, 
        rgba(33, 39, 104, 0.9) 50%, 
        rgba(14, 59, 150, 0.9) 100%
      );
    }
  }

  // 滚动条角落
  &::-webkit-scrollbar-corner {
    background: rgba(33, 39, 104, 0.2);
  }

  // 表格主体滚动区域
  .el-table__body-wrapper {
    &::-webkit-scrollbar {
      width: 18px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(33, 39, 104, 0.2);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, 
        rgba(14, 59, 150, 0.7) 0%, 
        rgba(33, 39, 104, 0.8) 50%, 
        rgba(14, 59, 150, 0.7) 100%
      );
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
      
      &:hover {
        background: linear-gradient(180deg, 
          rgba(14, 59, 150, 0.9) 0%, 
          rgba(33, 39, 104, 1) 50%, 
          rgba(14, 59, 150, 0.9) 100%
        );
        box-shadow: 0 0 8px rgba(14, 59, 150, 0.4);
      }
    }
  }
}

.tablec {
padding: 24px;
  .table-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    background: #212768;
    padding: 12px 0;
    margin-bottom: 0;
    border: 1px solid #ccc;
    border-bottom: none;
  }

  .tablec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;

    .title1 {
      font-size: 24px;
      font-weight: 600;
      min-width: 100px;
      .title1-label{
        font-size: 18px;
        line-height: 24px;
        margin-right: 4px;
      }
    }
  }

  // .el-table {
  //   .el-table__cell {
  //     padding: 0;
  //   }

  //   .cell {
  //     font-size: 12px;
  //     line-height: 18px;
  //   }
  // }
}
</style>


<style lang="scss">
.userdialog {
  .el-table {
    .el-table__cell {
      padding: 0;
    }

    .cell {
      font-size: 16px;
      line-height: 32px;
    }
  }
}
</style>
